<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <title>Insert title here</title>
    <link href="static/easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="static/easyui/themes/icon.css" rel="stylesheet" />
    <script type="text/javascript" src="static/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="static/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
<%
    String username = String.valueOf(session.getAttribute("username"));
%>
<div data-options="region:'west'" style="width:50%;">
    <table>
        <tr>
            <td>物品类别：</td>
            <td>
                <select class="easyui-combobox" name="goodsType" id="goodsType" style="width: 200px;"></select>
            </td>
        </tr>
        <tr>
            <td>丢失时间：</td>
            <td><input class="easyui-datetimebox" id="lossTime"
                       data-options="" style="width: 200px"></td>
        </tr>
        <tr>
            <td style="vertical-align:top">丢失位置：</td>
            <td ><a id="selectLocation" class="easyui-linkbutton"
                    data-options="iconCls:'icon-search'">选择位置</a>先点击右侧地图的确认按钮，再点击此确认按钮<br />
                <input class="easyui-textbox" type="text" name="lng" id="lng" data-options="editable:false"></input>经度
                <br/>
                <input class="easyui-textbox" type="text" name="lat" id="lat" data-options="editable:false"></input>纬度
                <br/>
                <input class="easyui-textbox" type="text" value="" name="lossLocation" id="lossLocation" data-options="editable:false" style="width: 500px"></input>地点
            </td>
        </tr>
        <tr>
            <td style="vertical-align:top">详情：</td>
            <td><input class="easyui-textbox" id="description" data-options="multiline:true" style="width:400px;height:100px"></input></td>
        </tr>
        <tr>
            <td>上传照片：</td>
            <td><input class="easyui-filebox" id="file" name="file" data-options="buttonText:'选择文件'" style="width:300px">
                <br/>
                <label id="fileName"></label>
            </td>
        </tr>
        <tr>
            <td><a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="submit()" >提交</a></td>
            <td><a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" onclick="reset()" >重置</a></td>
        </tr>
    </table>
</div>
<div data-options="region:'center'" style="padding:20px">
    <iframe class="map-iframe" src="manage/amap.jsp" frameborder="no"   border="no" height="100%" width="100%" scrolling="auto"></iframe>
</div>
<script>
  $(function() {
    // 页面进来加载物品类别下拉条
    $.ajax({
      type: "get",
      url: "goodsType/list",
      success: function(response) {
        $('#goodsType').combobox({
          data: response.data,
          valueField: 'id',
          textField: 'name'
        });
      }
    })
    // 点击定位, 跳转到地图
    $('#selectLocation').bind('click', function(){
      // 从localStorage中获取
      $('#lng').textbox('setValue', localStorage.lng);
      $('#lat').textbox('setValue', localStorage.lat);
      $('#lossLocation').textbox('setValue', localStorage.address);
    });
    // 用户上传图片事件
    $('#file').filebox({'onChange': function(e) {
        // 获取到文件对象
        var file0 = $("#file").filebox("files")[0];
        var formData = new FormData();
        formData.append("file", file0);
        // 将文件直接上传到后台
        $.ajax({
          type: "post",
          url: "fileUpload",
          data: formData,
          processData: false,
          contentType: false,
          success: function(response) {
            // 将文件框的内容设置成为文件名
            $('#fileName').text(response.data);
          }
        })
      }})
  })
  // 提交表单
  function submit() {
    var goodsType = $('#goodsType').combobox('getValue');
    var lossTime = $('#lossTime').val();
    var lng = $('#lng').val();
    var lat = $('#lat').val();
    var address = $('#lossLocation').val();
    var description = $('#description').textbox('getValue');
    var fileName = $('#fileName').text();

    // 提交到后台
    $.ajax({
      url: "lost/add",
      type: "post",
      data: {
        "username": "<%=username%>",
        "goodsType": goodsType,
        "findTime": lossTime,
        "lng": lng,
        "lat": lat,
        "address": address,
        "description": description,
        "fileName": fileName
      },
      success: function(response) {
        var message = response.message;
        if (response.code == 0) {
          message += ",请关闭后刷新";
        }
        $.messager.show({
          title:'提示',
          msg: message,
          showType:'show',
          timeout:1500,
          style:{
            right:'',
            top:document.body.scrollTop+document.documentElement.scrollTop,
            bottom:''
          }
        });

      }
    });
  }
  // 重置表单
  function reset() {

  }
  /* 在父窗口中打开window */
  function openTopWindow(options) {
    options = !options ? {} : options;
    options.width = !options.width ? 500 : options.width;
    options.height = !options.height ? 400 : options.height;
    options.url = !options.url ? "404.html" : options.url;
    options.title = !options.title ? "" : options.title;
    parent.$("#topWindow").window({
      title : options.title,
      width : options.width,
      height : options.height,
      content : "<iframe scrolling='no' frameborder='0' border='0' height='100%' width='100%' src='"
          + options.url + "'></iframe>",
      modal : true,
      resizable : false,
      collapsible : false,
      // 关闭窗口的回调函数, 将经纬度和地址添加到文本框中
      onClose: function(e) {
        $('#lng').textbox('setValue', localStorage.lng);
        $('#lat').textbox('setValue', localStorage.lat);
        $('#lossLocation').textbox('setValue', localStorage.address);
      }
    });
  }
</script>
</body>
</html>